<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
    <el-table
      v-loading="loading"
      :data="list"
      border
      stripe
      :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
    >
      <el-table-column label="序号" align="center" prop="eventCode" width="80">
        <template #default="{ $index }">
          <span>
            {{ $index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="场次编号" align="center" prop="sessionCode" />
      <el-table-column
        label="产品名称"
        align="center"
        prop="coalType"
        width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="客户名称" align="center" prop="customerName" />
      <el-table-column label="保证金(元)" align="center" prop="securityDeposit" />
      <el-table-column label="状态" align="center"> 已缴纳 </el-table-column>
      <el-table-column
        label="报名时间"
        align="center"
        prop="registrationTime"
        :formatter="dateFormatter"
        :show-overflow-tooltip="true"
      />
    </el-table>
  </Dialog>
</template>
<script lang="ts" setup>
import * as bidding from '@/api/bidding'
import { dateFormatter } from '@/utils/formatTime'

const dialogVisible = ref(false)
const dialogTitle = ref('')
const loading = ref(false)
const list = ref([])

const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = '报名客户'
  try {
    loading.value = true
    list.value = await bidding.getSignUpCustomer({ sessionId: id })
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>
